<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-row>
        <a-col :span="8" v-for="item in model" :key="item.id">
          <a-checkbox @change="handleChange($event, item)" :checked="item.isUse == '1'">
            {{ item.keyword }}
          </a-checkbox>
        </a-col>
        <a-col :span="8" v-if="inputVisible">
          <a-input
            ref="input"
            type="text"
            size="small"
            :style="{ width: '78px' }"
            :value="inputValue"
            @change="handleInputChange"
            @blur="handleInputConfirm"
            @keyup.enter="handleInputConfirm"
          />
        </a-col>
        <a-col :span="8"> <a type="link" @click="showInput"> 添加新词 </a></a-col>
      </a-row>
    </a-spin>
  </a-modal>
</template>

<script>
import { httpAction, getAction, postAction } from '@/api/manage'
import pick from 'lodash.pick'
import { duplicateCheck } from '@/api/api'
import JEditor from '@/components/jeecg/JEditor'
import JSwitch from '@/components/jeecg/JSwitch'

export default {
  name: 'SysMessageTemplateModal',
  components: {
    JEditor,
    JSwitch,
  },
  data() {
    return {
      title: '操作',
      visible: false,
      disable: true,
      model: [],
      labelCol: {
        span: 4,
      },
      disableSubmit: false,
      wrapperCol: {
        span: 20,
      },
      hangyeOptions: [],
      confirmLoading: false,
      form: this.$form.createForm(this),
      rules: {
        name: [{ required: true, message: '请输入行业名称', trigger: 'blur' }],
      },
      url: {
        add: '/industry/jnIndustry/add',
        edit: '/report5/edit-keyword',
        keywordAdd: '/report5/keyword-add',
        keyword: '/report5/keyword',
      },
      useEditor: false,
      templateEditorContent: '',
      inputVisible: false,
      inputValue: '',
      achievementId: '',
    }
  },
  created() {},
  mounted() {
    this.initDictData()
  },
  methods: {
    add() {
      this.disable = false
      this.edit({})
    },
    initDictData() {},
    handleInputChange(e) {
      this.inputValue = e.target.value
    },
    handleInputConfirm() {
      const inputValue = this.inputValue
      let model = this.model
      if (inputValue) {
        let obj = {
          reportId: this.achievementId,
          keyword: inputValue,
        }
        postAction(this.url.keywordAdd, obj).then((res) => {
          if (res.success) {
            this.keywordDetail()
          }
        })
        // tags = [...tags, inputValue]
      }

      Object.assign(this, {
        inputVisible: false,
        inputValue: '',
      })
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(function () {
        this.$refs.input.focus()
      })
    },
    edit(achievementId) {
      this.achievementId = achievementId
      this.keywordDetail()
      this.visible = true
    },
    keywordDetail() {
      let id = this.achievementId
      getAction(this.url.keyword + '/' + id).then((res) => {
        if (res.success) {
          this.model = [...res.result]
        }
      })
    },
    modalFormOk() {
      this.$emit('ok')
      this.visible = false
    },
    handleApprove() {
      this.$refs.modalForm.edit(this.model)
      this.$refs.modalForm.title = '审核'
      this.$refs.modalForm.disableSubmit = false
    },

    initAdiosList() {
      let that = this
      let params = {}
      getAction('/industry/jnIndustry/getList', params)
        .then((res) => {
          const { code, result, message } = res

          if (code == 200) {
            this.hangyeOptions =
              result &&
              result.map((e) => {
                return {
                  label: e.name,
                  value: e.id,
                }
              })
          }
        })
        .finally(() => {})
    },
    close() {
      this.$emit('close')

      this.visible = false
      this.disable = true
    },
    handleOk() {
      console.log(this.model)

      const that = this
      let httpurl = this.url.edit
      let method = 'put'
      // 触发表单验证
      httpAction(httpurl, this.model, method)
        .then((res) => {
          if (res.success) {
            that.$message.success('修改成功')
            that.$emit('ok')
          } else {
            that.$message.warning(res.message)
          }
        })
        .finally(() => {
          that.confirmLoading = false
          that.close()
        })
    },
    validateTemplateCode(rule, value, callback) {
      var params = {
        tableName: 'sys_sms_template',
        fieldName: 'template_code',
        fieldVal: value,
        dataId: this.model.id,
      }
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback()
        } else {
          callback(res.message)
        }
      })
    },
    handleCancel() {
      this.close()
    },
    handleChange(e, item) {
      let index = this.model.indexOf(item)
      if (index != -1) {
        this.model[index].isUse = this.model[index].isUse === 0 ? 1 : 0
      }

      //如果是邮件类型那么则改变模板内容是富文本编辑器
    },
  },
}
</script>

<style scoped></style>